export const initRadioChartOptions = (value) => {
  return {
    series: [
      {
        type: 'gauge',
        startAngle: 90,
        endAngle: -270,
        progress: {
          show: true,
          overlap: false,
          roundCap: true,
          clip: false,
          itemStyle: {
            color: '#4de8e8',
          },
        },
        axisLine: {
          lineStyle: {
            width: 18,
            color: [
              [value / 100, '#4de8e8'],
              [1, '#222b4a'],
            ],
          },
        },
        splitLine: {
          distance: -18,
          length: 18,
          lineStyle: {
            width: 2,
            color: '#222b4a',
          },
        },
        axisTick: { show: false },
        axisLabel: { show: false },
        pointer: { show: false },
        anchor: { show: false },
        detail: {
          valueAnimation: true,
          formatter: ['{value|' + value + '%}', '{name|完成率}'].join('\n'),
          rich: {
            value: {
              color: '#4de8e8',
              fontSize: 28,
              fontWeight: 'bold',
              fontFamily: 'Digital, monospace',
            },
            name: {
              color: '#fff',
              fontSize: 16,
              fontWeight: 'normal',
              padding: [8, 0, 0, 0],
            },
          },
          offsetCenter: [0, '0%'],
        },
        data: [
          {
            value,
            name: '完成率',
          },
        ],
      },
    ],
  }
}

export const initReportChartOptions = (data) => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999',
        },
      },
    },
    legend: {
      data: ['实际', '指标', '达成率', '增长率'],
      textStyle: {
        color: 'rgba(255, 255, 255, 0.8)',
      },
      bottom: '0%',
    },
    xAxis: [
      {
        type: 'category',
        data: data?.xAxisdata,
        axisPointer: {
          type: 'shadow',
        },
        axisLabel: {
          color: 'rgba(255, 255, 255, 0.8)',
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.8)',
          },
        },
        // splitLine: {
        //   show: true,
        //   lineStyle: {
        //     color: 'rgba(255, 255, 255, 0.8)',
        //   },
        // },
      },
    ],
    grid: {
      left: '3%',
      right: '4%',
      bottom: '13%',
      top: '15%',
      containLabel: true,
    },
    yAxis: [
      {
        type: 'value',
        name: '实际（万元）',
        nameTextStyle: {
          color: 'rgba(255, 255, 255, 0.8)',
        },
        min: 0,
        max: 3000,
        interval: 250,
        axisLabel: {
          formatter: '{value}',
          color: '#fff',
        },
        axisTick: {
          lineStyle: {
            type: 'dashed',
          },
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: 'rgba(255, 255, 255, 0.2)',
          },
        },
      },
      {
        type: 'value',
        name: '比率',
        nameTextStyle: {
          color: 'rgba(255, 255, 255, 0.8)',
        },
        min: 0,
        max: 200,
        interval: 40,
        axisLabel: {
          formatter: '{value}',
          color: '#fff',
        },
        axisTick: {
          lineStyle: {
            type: 'dashed',
          },
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: 'rgba(255, 255, 255, 0.2)',
          },
        },
      },
    ],
    series: [
      {
        name: '实际',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 万元'
          },
        },
        color: 'blue',
        data: data?.r,
      },
      {
        name: '指标',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 万元'
          },
        },
        color: '#76fbcc',
        data: data?.t,
      },
      {
        name: '达成率',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + '%'
          },
        },
        color: '#c97779',
        data: data?.achievement_rate,
      },
      {
        name: '增长率',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + '%'
          },
        },
        color: '#76ab5b',
        data: data?.growth_rate,
      },
    ],
  }
}

// 每月新增客户量统计
export const initAddNewCustomerChartOptions = (data) => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999',
        },
      },
    },
    // toolbox: {
    //   feature: {
    //     dataView: { show: true, readOnly: false },
    //     magicType: { show: true, type: ['line', 'bar'] },
    //     restore: { show: true },
    //     saveAsImage: { show: true },
    //   },
    // },
    legend: {
      data: ['新增客户数量', '环比趋势'],
      textStyle: {
        color: 'rgba(255, 255, 255, 0.8)',
      },
    },
    grid: {
      left: '7%',
      right: '4%',
      bottom: '3%',
      top: '25%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: data?.xAxisdata,
        axisPointer: {
          type: 'shadow',
        },
        axisLabel: {
          color: 'rgba(255, 255, 255, 0.8)',
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.8)',
          },
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '新增客户数量（个）',
        min: 0,
        max: 50,
        interval: 10,
        nameTextStyle: {
          color: 'rgba(255, 255, 255, 0.8)',
        },
        axisLabel: {
          formatter: '{value}',
          color: '#fff',
        },
        color: '#5b9bd5',
        axisTick: {
          lineStyle: {
            type: 'dashed',
          },
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: 'rgba(255, 255, 255, 0.2)',
          },
        },
      },
      {
        type: 'value',
        name: '环比趋势（%）',
        yAxisIndex: 1, // 配置多个y轴
        min: -50,
        max: 100,
        interval: 30,
        nameTextStyle: {
          color: 'rgba(255, 255, 255, 0.8)',
        },
        // axisLabel: {
        // formatter: '{value}',
        // color: '#fff',
        // },
        axisLabel: {
          formatter: function (value, index) {
            // 判断 value 是否为负数，如果是，返回红色样式；否则返回默认样式
            return value < 0 ? `{a|${value}}` : `${value}`
          },
          color: '#fff',
          rich: {
            a: {
              color: 'red', // 指定负数为红色的样式
            },
          },
        },

        axisTick: {
          lineStyle: {
            type: 'dashed',
          },
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: 'rgba(255, 255, 255, 0.2)',
          },
        },
      },
    ],
    series: [
      {
        name: '新增客户数量',
        type: 'bar',
        yAxisIndex: 0,
        tooltip: {
          valueFormatter: function (value) {
            return value + '个'
          },
        },
        color: '#5b9bd5',
        data: data?.r,
      },
      {
        name: '环比趋势',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + '%'
          },
        },
        color: '#ec7d31',
        data: data?.growth_rate,
      },
    ],
  }
}

// 新增供应商数量统计
export const initAddNewSupplierChartOptions = (data) => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999',
        },
      },
    },
    // toolbox: {
    //   feature: {
    //     dataView: { show: true, readOnly: false },
    //     magicType: { show: true, type: ['line', 'bar'] },
    //     restore: { show: true },
    //     saveAsImage: { show: true },
    //   },
    // },
    legend: {
      data: ['新增供应商', '环比趋势'],
      textStyle: {
        color: 'rgba(255, 255, 255, 0.8)',
      },
    },
    grid: {
      left: '7%',
      right: '4%',
      bottom: '3%',
      top: '25%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: data?.xAxisdata,
        axisPointer: {
          type: 'shadow',
        },
        axisLabel: {
          color: 'rgba(255, 255, 255, 0.8)',
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.8)',
          },
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '新增供应商（个）',
        yAxisIndex: 1, // 配置多个y轴
        min: 0,
        max: 50,
        interval: 10,
        nameTextStyle: {
          color: 'rgba(255, 255, 255, 0.8)',
        },
        axisLabel: {
          formatter: '{value}',
          color: '#fff',
        },
        color: '#5b9bd5',
        axisTick: {
          lineStyle: {
            type: 'dashed',
          },
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: 'rgba(255, 255, 255, 0.2)',
          },
        },
      },
      {
        type: 'value',
        name: '环比趋势（%）',
        yAxisIndex: 1, // 配置多个y轴
        min: -50,
        max: 100,
        interval: 30,
        nameTextStyle: {
          color: 'rgba(255, 255, 255, 0.8)',
        },
        // axisLabel: {
        //   formatter: '{value}',
        //   color: '#fff',
        // },
        axisLabel: {
          formatter: function (value, index) {
            // 判断 value 是否为负数，如果是，返回红色样式；否则返回默认样式
            return value < 0 ? `{a|${value}}` : `${value}`
          },
          color: '#fff',
          rich: {
            a: {
              color: 'red', // 指定负数为红色的样式
            },
          },
        },
        axisTick: {
          lineStyle: {
            type: 'dashed',
          },
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: 'rgba(255, 255, 255, 0.2)',
          },
        },
      },
    ],
    series: [
      {
        name: '新增供应商',
        type: 'bar',
        yAxisIndex: 0,
        tooltip: {
          valueFormatter: function (value) {
            return value + '个'
          },
        },
        color: '#5b9bd5',
        data: data?.r,
      },
      {
        name: '环比趋势',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + '%'
          },
        },
        color: '#ec7d31',
        data: data?.growth_rate,
      },
    ],
  }
}
